<template>
    <el-button @click="show()" type="primary" plain>opShow</el-button>
    <el-button @click="upRank()" type="primary" plain>updateRank</el-button>
    <div :id="'mean300d-close-echart' + stock" :style="{ width: '1000px', height: '600px' }"></div>
</template>

<script setup>
import { onMounted, defineProps, reactive } from "vue";
import * as echarts from 'echarts'
import { built300dEchatOption } from '@/myechart/multiYaxEchart'
import { getWeekData } from '@/service/week';
import { useRouteQuery } from "../utils/useRoute";
import { openNewTableDisplay } from "../router";
import { updateRank } from "../service/tradingRank";
import { ElMessage } from "element-plus";

const props = defineProps({
    stock: String
})

const state = reactive({
    lpShow : false,
    opShow : true,
    sDate : '',
})

let lpShow = useRouteQuery('lpShow', 0)
if (lpShow == 1) {
    state.lpShow = true
}

state.sDate = useRouteQuery('sDate', '')


let myChart = null
const initEchart = () => {
    myChart = echarts.init(document.getElementById('mean300d-close-echart' + props.stock))
    myChart.resize({
        width: Math.min(1000, window.innerWidth / 1.5),
    });

    // 添加点击事件
    myChart.on('dblclick', function(params) {
        openNewTableDisplay(props.stock, params.name)
    });
}

const loadEchart = () => {
    getWeekData(props.stock).then(res => {
        let option = built300dEchatOption(res.data, state.opShow, state.lpShow, state.sDate)
        myChart.setOption(option)
    })
}

const show = () => {
    state.opShow = !state.opShow
    loadEchart()
}

const upRank = () => {
    updateRank(props.stock).then(res => {
        ElMessage({
            message: '更新成功',
            type: 'success',
        })
    })
}

onMounted(()=> {
    initEchart()
    loadEchart()
})
</script>